<template>
    <!-- 添加目录对话框 -->
    <div class='container'>
        <!-- :title="title" -->
        <el-dialog :title="node.id ? '修改目录' : '新增目录'" :visible="showDialog" @close="btnCancel" width="35%">
            <el-form :model="addDirectorysFrom" :rules="addFormRules" class="demo-ruleForm" label-width="80px"
                ref="addDirectorysFrom">
                <!-- v-if="subjectID ? false : true" -->
                <el-form-item label="所属学科" prop="subjectID">
                    <el-select placeholder="请选择" style="width:100%" v-model="addDirectorysFrom.subjectID">
                        <el-option :key="item.id" :label="item.subjectName" :value="item.subjectID"
                            v-for="item in subjectList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="目录名称" prop="directoryName">
                    <el-input v-model="addDirectorysFrom.directoryName"></el-input>
                </el-form-item>
            </el-form>
            <span class="dialog-footer" slot="footer">
                <el-button @click="btnCancel">取消</el-button>
                <el-button @click="btnOK" type="primary">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { add, update, list, detail } from '@/api/hmmm/directorys';

export default {
    props: {
        showDialog: {
            type: Boolean,
            require: true,
            default: false
        },
        id: {
            type: [String, Number],
            require: true,
        },
        node: {
            type: Object,
            default: {}
        },
        // subjectID: {
        //     type: [String, Number],
        //     require: true,
        // },
        // subjectName: {
        //     type: String,
        //     require: true
        // },

    },
    data() {
        return {
            addDirectorysFrom: {
                // subjectName: '',
                directoryName: '',
                subjectID: ''
            },
            // 目录简单列表---所属学科
            subjectList: [],
            addFormRules: {
                subjectName: [{ required: true, message: '请输入所属学科', trigger: 'blur' }],
                directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
            },
        };
    },
    mounted() {
        this.list();
    },
    methods: {
        async detail(node) {
            // console.log(node);
            let { data } = await detail(node)
            // console.log(data);
            this.addDirectorysFrom.directoryName = data.directoryName
            this.addDirectorysFrom.subjectID = data.subjectID
        },
        // 获取目录简单列表
        async list() {
            const { data } = await list();
            this.subjectList = data.items;
            // console.log('10', this.subjectList);
        },
        async btnOK() {
            try {
                await this.$refs.addDirectorysFrom.validate()
                if (this.node.id) {
                    await update({ id: this.node.id, ...this.addDirectorysFrom })
                } else {
                    console.log(this.subjectList);

                    await add({
                        ...this.addDirectorysFrom
                    })

                }
                this.$emit('updateForm')
                this.$emit('update:showDialog', false)
                this.$message.success(this.node.id ? '修改目录成功啦!' : '新增目录成功啦!')
            } catch (error) {
                console.log(error)
            }
        },
        btnCancel() {
            this.$refs.addDirectorysFrom.resetFields();
            this.addDirectorysFrom = {
                subjectID: '',
                directoryName: '',
            }
            this.$emit('update:showDialog', false);
        },
    },
};
</script>

<style scoped lang='less'></style>
